<script>
import {getHot, loginsms, messageLogin, psaawordLogin, reg, updata} from "@/api";
import {mapMutations} from "vuex";
// import router from "@/router";


export default {
  name: "headerPage",
  data() {
    return {
      // 传递参数
      paramsa: {
        pageNum: 1,
        pageSize: 20
      },
      // 倒计时
      countdown: 60,
      isCountingDown: false,
      // 忘记密码 弹出框
      dialogForget: false,
      // 验证码
      yanzhengma: '',
      // 退出
      dialogVisibleQuit: false,
      // 企业搜索
      companyName: '',
      // 手机号登录
      // 密码登录
      formLoginpassword: {
        phoneNumber: '',
        password: '',
      },
      activeIndex: '1',
      activeIndex2: '1',
      loginlogVisible: false,
      dialogRegister: false,
      registerList: {
        passwordReg: '',
        username: '',
        phoneNumber: '',
        password: "",
        gender: "男",
        nickname: '',
        captcha: ''
      },
      // 注册验证
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          // {min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 8, max: 100, message: '密码至少八位', trigger: 'blur'}
        ],
        passwordReg: [
          {required: true, message: '请再次输入密码', trigger: 'blur'},
          {min: 8, max: 100, message: '密码至少八位', trigger: 'blur'}
        ],
        phoneNumber: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {min: 0, max: 100, message: '无限制', trigger: 'blur'}
        ],
      },
      //获取手机好
      phoneList: {
        phoneNumber: '',
        captcha: ''
      },
      // 忘记密码
      forgetList: {
        passwordGet: '',
        phoneNumber: '',
        password: '',
        captcha: ''
      }
      //
    };
  },
  created() {
  },
  methods: {
    ...mapMutations(['changeLogin']),
    // 获取全部企业
    goList() {
      getHot(this.paramsa).then(res => {
        console.log(res.data.list)
        if (this.$route.name === "searchPage") {
          return 0
        } else {
          this.$router.push({
            name: "searchPage",
            params: {
              data: res.data.list
            }
          })
        }
      })
    },
    // 立即登录
    loginBtn() {
      this.dialogForget = false
      this.loginlogVisible = true
      this.dialogRegister = false
    },
    // 忘记密码
    forgetPassword() {
      // 打开忘记密码
      this.dialogForget = true
      //关闭主页面
      this.loginlogVisible = false
    },
    handleCloseforget() {
      this.dialogForget = false
    },
    // 跳转发布企业
    publishBtn() {
      // 判断登录状态
      // 存在登录状态 时跳转
      if (this.$store.state.loginState === true) {
        this.$router.push({
          name: 'publishPage'
        })
      } else {
        //请进行登录  状态
        this.$message({
          center: true,
          dangerouslyUseHTMLString: true,
          message: '<strong style="margin-right: 100px">您还没有登录，请进行登录！</strong>',
          type: 'warning'
        });
        // this.loginlogVisible = true
      }

    },
    // 退出登录
    quitBtn() {
      this.dialogVisibleQuit = true
    },
    //退出成功
    quitSuccess() {
      this.dialogVisibleQuit = false
      this.$store.state.loginState = false
      this.$message({
        dangerouslyUseHTMLString: true,
        message: '<strong style="margin-right: 100px">退出成功！</strong>',
        type: 'success'
      });
    },
    //跳转首页
    goIndex() {
      if (this.$route.name === "index") {
        return
      } else {
        this.$router.push({
          path: '/',
        })
      }
    },
    // 立即注册
    ImmediateRegistration() {
      // 静态判断两次密码
      if (this.registerList.password === this.registerList.passwordReg) {
        // 点击注册时验证码校验
        let ma = localStorage.getItem('Verificationcode')
        // console.log(ma)
        if (ma === this.registerList.captcha) {
          reg(this.registerList).then(res => {
            console.log(res)
          })
        } else {
          window.alert("验证码错误！")
        }
      } else {
        window.alert("两次密码不同！")
      }
    },
    // 注册
    registerBtn() {
      this.loginlogVisible = false
      this.dialogRegister = true
    },
    // 获取验证码 登录 获取
    getMessage() {
      messageLogin({phoneNumber: this.phoneList.phoneNumber}).then(res => {
        console.log(res)
        // 验证码存储
        this.yanzhengma = res.data.captcha
        localStorage.setItem('Verificationcode', this.yanzhengma)
        if (!this.isCountingDown) {
          // 发送验证码的逻辑
          this.isCountingDown = true;
          this.startCountdown();
        }
      })
    },
    startCountdown() {
      const timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
          console.log(this.countdown--)
        } else {
          clearInterval(timer);
          this.isCountingDown = false;
          this.countdown = 60;
        }
      }, 1000);
    },
    // 重置 获取验证阿门
    getMessageForget() {
      messageLogin({phoneNumber: this.forgetList.phoneNumber}).then(res => {
        console.log(res)
        // 验证码存储
        this.yanzhengma = res.data.captcha
        localStorage.setItem('Verificationcode', this.yanzhengma)
      })
    },
    // 忘记密码事件
    forgetBtn() {
      // 获取验证码
      let ma = localStorage.getItem('Verificationcode')
      console.log(ma)
      // 静态判断两次密码
      if (this.forgetList.password === this.forgetList.passwordGet) {
        // 点击注册时验证码校验
        let ma = localStorage.getItem('Verificationcode')
        // console.log(ma)
        if (ma === this.forgetList.captcha) {
          updata(this.forgetList).then(res => {
            console.log(res)
          })
        } else {
          window.alert("验证码错误！")
        }
      } else {
        window.alert("两次密码不同！")
      }
      // if (this.forgetList.captcha === ma) {
      //   updata(this.forgetList).then(res => {
      //     console.log(res)
      //     if (res.code === 2001) {
      //       window.alert("重置成功！")
      //       this.dialogForget = false
      //     }
      //   })
      // } else {
      //   window.alert("验证码错误！")
      // }
      // if(this.forgetList.password)
    },
    // 手机号验证码登录
    // 手机号登录按钮
    onphoneLogin() {
      let ma = localStorage.getItem('Verificationcode')
      console.log(ma)
      if (ma === this.phoneList.captcha) {
        loginsms(this.phoneList).then(res => {
          console.log(res)
          if (res.code === 2001) {
            // 登录成功后 清除验证码
            localStorage.clear()
            this.$store.commit("changeregisterList", res.data)
            this.$store.state.loginState = true
            this.loginlogVisible = false
            this.$message({
              dangerouslyUseHTMLString: true,
              message: '<strong style="margin-right: 100px">恭喜你，登陆成功！</strong>',
              type: 'success'
            });
          } else {
            this.$message({
              dangerouslyUseHTMLString: true,
              message: '<strong style="margin-right: 100px">账号/验证码存在错误！</strong>',
              type: 'error'
            });
          }
        })
      } else {
        window.alert("验证码错误！")
      }
    },
    // 手机号密码登录
    onLogin(formLoginpassword) {
      if (formLoginpassword.phoneNumber.length === 0) {
        window.alert("手机号不能为空！")
      } else {
        psaawordLogin(formLoginpassword).then(res => {
          if (res.code === 2001) {
            // vuex  以及  成功关闭
            this.$store.state.loginState = true
            this.loginlogVisible = false
            this.$store.commit("changeregisterList", res.data)
            // 存储登录状态
            //操作成功 提示框
            this.$message({
              dangerouslyUseHTMLString: true,
              message: '<strong style="margin-right: 100px">恭喜你，登陆成功！</strong>',
              type: 'success'
            });
          } else {
            this.$message({
              dangerouslyUseHTMLString: true,
              message: '<strong style="margin-right: 100px">账号/密码存在错误！</strong>',
              type: 'error'
            });
          }
        })
      }

    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>

<template>
  <div>
    <header>
      <!--存放头部内容-->
      <div class="headerContent">
        <!-- 左-->
        <div class="flexBoxleft indexBox" @click="goIndex">
          <!-- icon 图标-->
          <div>
            <svg t="1717494273596" class="icon" viewBox="0 0 1024 1024" version="1.1"
                 xmlns="http://www.w3.org/2000/svg"
                 p-id="5322" width="38" height="38">
              <path
                  d="M966.860194 180.156858c0-23.825035-20.34344-43.485809-45.26074-43.690608l-40.482079-0.546133a561.151252 561.151252 0 0 1-168.823242-35.020753C621.294788 65.537278 564.155664 26.147464 564.155664 26.147464L563.677798 25.669598 538.760498 8.398154A46.216472 46.216472 0 0 0 511.863467 0.001365a46.148205 46.148205 0 0 0-26.897031 8.396789l-24.644234 17.066644c-4.77866 3.413329-62.39565 41.779144-148.616335 75.1615a568.455775 568.455775 0 0 1-168.823242 35.08902l-40.686879 0.477866c-24.9173 0.2048-45.329006 19.93384-45.329006 43.690608V573.440601c0 100.897999 60.142853 213.537849 165.000314 309.111054C317.23546 969.728072 428.373445 1024 511.590401 1024c83.012156 0 194.218408-54.067128 290.542545-140.970479 104.85746-95.573206 165.000313-208.213056 165.000314-309.042788l-0.273066-393.829875z"
                  fill="#1296db" p-id="5323" data-spm-anchor-id="a313x.search_index.0.i5.366c3a811aKKw0"
                  class="selected"></path>
              <path
                  d="M309.24827 437.794915h408.234123v251.220998H309.24827v-251.220998z m360.44752 207.53039v-60.074587H357.034873v60.074587h312.660917z m-312.660917-101.717198h312.660917v-62.122584H357.034873v62.122584z m-124.245167-300.372933h256.682324v-62.805249h47.786603v62.805249h256.682324v45.05594H584.36257c51.199932 49.8346 130.389159 89.429214 238.250349 118.101176l-21.162638 44.373274c-122.879836-41.642611-209.578387-95.573206-260.095653-162.47445h-4.095995v127.658497h-47.786603v-127.658497h-4.095995c-53.247929 65.535913-139.94648 120.149173-259.412987 163.157116l-25.941299-43.690608c109.226521-31.402625 190.463746-71.679904 243.711675-119.466508H232.789706v-45.05594z m-13.653316 499.028668h586.409885v45.738606H219.13639v-45.738606z"
                  fill="#FFFFFF" p-id="5324"></path>
            </svg>
          </div>
          <div class="title">企业评分网</div>
        </div>
        <!--右-->
        <div class="flexBoxright">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                   text-color="white"
                   background-color="#0454ac"
                   @open="handleOpen"
                   @close="handleClose"
          >
            <el-menu-item @click="goList">
              <el-button type="text" width="100%" style=" color: white;">企业列表
              </el-button>
            </el-menu-item>
            <!-- 发布企业-->
            <el-menu-item>
              <el-button type="text" width="100%" style=" color: white;" @click="publishBtn">发布企业
              </el-button>
            </el-menu-item>
            <el-menu-item>
              <!--登录 注册按钮-->
              <el-button type="text" width="100%" style=" color: white;" @click="loginlogVisible = true"
                         v-if="this.$store.state.loginState ===false">注册/登录
              </el-button>
              <div v-if="this.$store.state.loginState ===true" class="userBox" @click="quitBtn">
                <div>{{ this.$store.state.registerList.username }}</div>
                <div>{{ this.$store.state.registerList.phoneNumber }}</div>
              </div>
            </el-menu-item>
          </el-menu>
        </div>
      </div>
    </header>
    <!-- 登录的弹出框-->
    <div class="loginModel">
      <el-dialog
          title="登录账户"
          :visible.sync="loginlogVisible"
          width="30%"
      >
        <div class="loginContent" style="padding-top: 0">
          <el-tabs type="border-card">
            <!-- 账号密码登录-->
            <el-tab-pane label="账号密码登录">
              <!--表单密码登录-->
              <el-form ref="form" :model="formLoginpassword" label-width="80px">
                <el-form-item>
                  <el-input v-model="formLoginpassword.phoneNumber" placeholder="请输入登录手机号"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-input v-model="formLoginpassword.password" placeholder="请输入登陆密码"
                            type="password"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onLogin(formLoginpassword)">立即登录</el-button>
                </el-form-item>
                <el-form-item style="margin: 0">
                  <el-button type="text" @click="registerBtn">立即注册</el-button>
                  <el-button type="text" style="float: right" @click="forgetPassword">忘记密码？</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="手机号登录">
              <!--手机号登录-->
              <el-form ref="form" :model="phoneList" label-width="80px">
                <el-form-item>
                  <el-input v-model="phoneList.phoneNumber" placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-row>
                    <el-col :span="15">
                      <div class="grid-content bg-purple">
                        <el-form-item>
                          <el-input placeholder="请输入四位验证码" v-model="phoneList.captcha"></el-input>
                        </el-form-item>
                      </div>
                    </el-col>
                    <el-col :span="8">
                      <div class="grid-content bg-purple-light">
                        <el-button type="primary" plain @click="getMessage" :disabled="isCountingDown">
                          {{ isCountingDown ? `${countdown} 秒后重新获取` : '获取验证码' }}
                        </el-button>
                      </div>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onphoneLogin()">立即登录</el-button>
                </el-form-item>
                <el-form-item style="margin: 0">
                  <el-button type="text" @click="registerBtn">立即注册</el-button>
                  <el-button type="text" style="float: right" @click="forgetPassword">忘记密码？</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>
    </div>
    <!-- 注册弹出框-->
    <div class="registerBox">
      <el-dialog
          title="注册个人信息"
          :visible.sync="dialogRegister"
          width="30%"
      >
        <!--弹出框内容-->
        <div class="loginContent">
          <el-tabs type="border-card">
            <el-form :model="registerList" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="" prop="username">
                <el-input v-model="registerList.username" placeholder="用户名称"></el-input>
              </el-form-item>
              <el-form-item label="" prop="password">
                <el-input v-model="registerList.password" placeholder="密码" type="password"></el-input>
              </el-form-item>
              <el-form-item label="" prop="passwordReg">
                <el-input v-model="registerList.passwordReg" placeholder="再次输入密码" type="password"></el-input>
              </el-form-item>
              <el-form-item abel="" prop="phoneNumber">
                <el-input v-model="registerList.phoneNumber" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item l>
                <el-row>
                  <el-col :span="15">
                    <div class="grid-content bg-purple">
                      <el-form-item>
                        <el-input placeholder="请输入四位验证码" v-model="registerList.captcha"></el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                      <el-button type="primary" plain @click="getMessage" :disabled="isCountingDown">
                        {{ isCountingDown ? `${countdown} 秒后重新获取` : '发送验证码' }}
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="ImmediateRegistration">立即注册</el-button>
              </el-form-item>
              <el-form-item style="margin: 0">
                <el-button type="text" @click="loginBtn">立即登录</el-button>
              </el-form-item>
            </el-form>
          </el-tabs>
        </div>
        <span slot="footer" class="dialog-footer">
          </span>
      </el-dialog>
    </div>
    <!-- 退出弹出框-->
    <div class="quitBox">
      <el-dialog
          title="是否退出登录？"
          :visible.sync="dialogVisibleQuit"
          width="30%"
          :before-close="handleClose">
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleQuit = false">取 消</el-button>
    <el-button type="primary" @click="quitSuccess">确 定</el-button>
  </span>
      </el-dialog>
    </div>
    <!--重置密码弹出框-->
    <div class="forgetBox">
      <el-dialog
          title="忘记密码"
          :visible.sync="dialogForget"
          width="30%"
          :before-close="handleCloseforget">
        <!-- 弹出框内容·-->
        <div class="forgetBox">
          <el-card class="box-card">
            <el-form ref="form" :model="forgetList" label-width="80px">
              <el-form-item>
                <el-input v-model="forgetList.phoneNumber" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item>
                <el-row>
                  <el-col :span="16">
                    <div class="grid-content bg-purple">
                      <el-form-item>
                        <el-input placeholder="请输入四位验证码" v-model="forgetList.captcha"></el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="grid-content bg-purple-light">
                      <el-button type="primary" plain @click="getMessage" :disabled="isCountingDown">
                        {{ isCountingDown ? `${countdown} 秒后重新获取` : '获取验证码' }}
                      </el-button>
                    </div>
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item>
                <el-input v-model="forgetList.password" type="password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input v-model="forgetList.passwordGet" type="password" placeholder="请确认密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="forgetBtn">确认修改</el-button>
              </el-form-item>
              <el-form-item style="margin: 0">
                <el-button type="text" @click="loginBtn">立即登录</el-button>
              </el-form-item>
            </el-form>
            <!--            </el-tab-pane>-->
          </el-card>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang="scss">
.indexBox:hover {
  cursor: pointer;
}

::v-deep .el-dialog__body {
  //padding-top: 0;
}

::v-deep .el-dialog__header {
  border-bottom: 1px solid #dfdfdf;
  //padding-bottom: 0;
}

::v-deep .el-message--warning {
  padding-left: 100px;
}

.forgetBox {
  ::v-deep .el-button--primary {
    width: 100%;
  }

  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }

}

.quitBox {
  ::v-deep .el-dialog__body {
    height: 0;
    padding: 0;
  }

  ::v-deep .el-dialog__footer {
    width: 100%;
    margin: auto;
    text-align: center;
  }
}

.userBox {
  text-align: center;
  height: 40px;
  line-height: 40px;
  margin-top: 5px;

  div {
    height: 15px;
  }
}

.registerBox {
  ::v-deep .el-button--primary {
    width: 100%;
  }

  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }

  ::v-deep .el-button--primary {
    width: 100%;
  }

  ::v-deep .el-tabs__nav {
    width: 100%;
    text-align: center;
  }

  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    width: 50%;
  }
}

.loginModel {
  ::v-deep .el-form-item__content {
    margin-left: 0 !important;
  }

  ::v-deep .el-button--primary {
    width: 100%;
  }

  ::v-deep .el-tabs__nav {
    width: 100%;
    text-align: center;
  }

  ::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
    width: 50%;
  }

}

::v-deep .el-menu--horizontal > .el-menu-item {
  color: white;
}

::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
  color: white;
}

.littleFont {
  color: #999;
  font-size: 12px;
  margin-top: 8px;
  text-align: center;
}


* {
  margin: 0 auto;
}

.hotBox {
  margin-top: 20px;
  display: flex;
}

::v-deep .ant-tabs-nav {
  margin-left: 100px;
}

.hotEnterprises {
  display: inline-block;
  width: 786px;
  height: 56px;
  vertical-align: top;
  text-align: left;

  a {
    display: inline-block;
    vertical-align: top;
    margin-right: 24px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 22px;
    color: #e0e0e0;
  }
}

.hotTitle {
  color: white;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  overflow: hidden;
  margin-right: 32px;
  padding-top: 5px;
  text-align: center;
  font-size: 16px;
  letter-spacing: 4px;
  text-indent: 4px;
  line-height: 22px;
  background: hsla(0, 0%, 100%, .16);
}

.hotSearch {
  //display: flex;
  width: 880px;
  margin-top: 20px;
}

::v-deep .ant-tabs-nav-scroll {
  border: none;
}

.titleBox {
  width: 650px;
  display: inline-block;
  margin-bottom: 33px;
  margin-top: 40px;
  font-size: 48px;
  line-height: 64px;
  letter-spacing: 8px;
  text-indent: 7px;
  color: #fff;
}

.container {
  text-align: center;
  width: 1248px;
  margin: 0 auto;
  //background-color: red;
}

* {
  margin: 0 auto;
}

::v-deep .ant-menu {
  //background-color: rgb(1, 84, 165);
  //opacity: 0.5;
  color: white;
  border: none;
}

ul {
  display: flex;

  li {
    //padding: 10px;
    margin: 5px 8px 5px 6px;
  }
}

.line {
  height: 15px;
  border-right: 1px solid whitesmoke;
}

header {
  //background-color: #0454ac;
  box-shadow: none !important;
  height: 70px !important;

  a {
    color: white !important;
  }

  .headerContent {
    display: flex;
    justify-content: space-between;
    //background-color: red;
    height: 100%;
    margin: 0 auto;
    width: 1248px;
  }

  .title {
    margin-left: 5px;
    color: white;
    font-size: 24px;
    font-weight: 700;
  }
}

.flexBoxleft {
  display: flex;
  align-items: center;
  margin-left: 0px;
}

::v-deep .el-menu-demo:hover {
  background-color: #0454ac !important;
}

.flexBoxright {
  ::v-deep .el-menu-demo {
    background-color: #0454ac !important;
  }

  .flexBoxright:hover {
    background-color: #0454ac !important;
  }

  display: flex;
  align-items: center;
  margin-right: 0px;
}

.backgroundBox {
  width: 100%;
  height: 445px;
  //background-image: url("../../../guanw/src/assets/banner.jpg");
}

header {
  box-shadow: none !important;
  height: 70px !important;

  ::v-deep .el-menu.el-menu--horizontal {
    border: none;
  }

  a {
    color: white !important;
  }

  .headerContent {
    display: flex;
    justify-content: space-between;
    //background-color: red;
    height: 100%;
    margin: 0 auto;
    width: 1248px;
  }

  .title {
    margin-left: 5px;
    color: white;
    font-size: 24px;
    font-weight: 700;
  }
}

.flexBoxleft {
  display: flex;
  align-items: center;
  margin-left: 0px;
}

.flexBoxright {
  color: white !important;
  display: flex;
  align-items: center;
  margin-right: 0px;

  ::v-deep .el-menu-demo {
    color: white !important;
  }
}

::v-deep .el-menu--horizontal > .el-menu-item.is-active {
  color: white;
}

.backgroundBox {
  width: 100%;
  height: 445px;
  //  background-image: url("../../../guanwnang/src/assets/banner.jpg");
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
